<!-- 我的优惠券 -->
<template>
  <view class="coupon">
    <aster-back font-color="#333" :show-title="true" title="我的优惠券" />
    <aster-tabs
      :list="categoryList"
      :current="current"
      line-color="#ff6a6c"
      :scrollable="false"
      @click="handleClick"
    />
    <view class="coupon__content">
      <checkbox-group @change="handlerChange">
        <view v-for="(item, index) in couponList" :key="index" style="margin-bottom: 20rpx">
          <view class="coupon__content__item">
            <view v-show="showCheckbox" class="coupon__content__item__checkbox">
              <checkbox :value="item.id" />
            </view>
            <view
              :class="
                current == 0
                  ? 'coupon__content__item__left'
                  : 'coupon__content__item__left coupon__disable'
              "
            >
              <view class="coupon__content__item__left__discount">
                {{ discountName(item.discount) }}
              </view>
              <view class="coupon__content__item__left__quota">
                {{ quotaName(item.discount, item.quota) }}
              </view>
            </view>
            <view
              :class="
                current == 0
                  ? 'coupon__content__item__right'
                  : 'coupon__content__item__right coupon__disable'
              "
            >
              <view class="coupon__content__item__right__receive" v-if="current != 0">
                <icon class="iconfont icon-yishiyong" v-if="current == 1" />
                <icon class="iconfont icon-yiguoqi" v-else />
              </view>
              <view class="coupon__content__item__right__title">
                {{ item.title }}
              </view>
              <view class="coupon__content__item__right__time">
                <view>{{ limitTime(item.startTime, item.endTime) }}</view>
                <view v-show="current == 0">
                  <button @click="to_use(item.id)">去使用</button>
                </view>
              </view>
              <view class="coupon__content__item__right__tip">
                <view class="aster-line" />
                <view class="coupon__content__item__right__tip__btn">
                  <view>详细信息</view>
                  <view @click="showDetail(index)">
                    <icon class="iconfont icon-jiantouxia" type="" style="font-size: 12px" />
                  </view>
                </view>
              </view>
            </view>
          </view>
          <view v-show="currentIndex == index && showRule" class="coupon__content__item__rule">
            <view>使用说明：{{ item.title }}</view>
            <view>优惠券号：{{ item.code }}</view>
          </view>
        </view>
      </checkbox-group>
    </view>
    <aster-tabbar :customStyle="tabbarStyle">
      <view class="coupon__bottom">
        <view class="coupon__bottom__btn" @click="to_coupon()" v-if="!showCheckbox">
          领更多好券
        </view>
        <view class="coupon__bottom__btn" @click="to_delete()" v-else>删除</view>
        <view class="coupon__bottom__setting" @click="showCheckbox = !showCheckbox">
          {{ showCheckbox ? '关闭' : '管理' }}
        </view>
      </view>
    </aster-tabbar>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterTabs from '@/components/common/aster-tabs.vue';
  import AsterTabbar from '@/components/common/aster-tabbar.vue';
  import { getMyCoupon } from '@/services/api/coupon/coupon';
  import { reactive, ref, watchEffect } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { ResultEnum } from '@/enums/httpEnum';
  import { CouponInfoModel, MyCouponModel } from '@/services/model/couponModel';
  import { router } from '@/utils/router';
  import config from '@/utils/config';
  import { isDef, isNotEmpty } from '@/utils/is';
  import { Toast } from '@/utils/uniapi/prompt';

  const categoryList = ref();
  const current = ref(0);
  const couponList = ref<CouponInfoModel[]>();
  const couponData = ref<MyCouponModel>();
  const currentIndex = ref<Number>();
  const showRule = ref<Boolean>(false);
  const showCheckbox = ref<Boolean>(false);
  const selected = ref<Number[]>([]);
  const tabbarStyle = reactive({
    borderTopLeftRadius: '10px',
    borderTopRightRadius: '10px',
    backgroundColor: '#ff6a6c',
  });

  watchEffect(() => {
    if (showCheckbox.value) {
      tabbarStyle.backgroundColor = '#f1a532';
    } else {
      tabbarStyle.backgroundColor = '#ff6a6c';
    }
  });

  onLoad(() => {
    loadData();
  });

  const loadData = () => {
    getMyCoupon().then(({ data }) => {
      if (data.code === ResultEnum.SUCCESS) {
        couponData.value = data.data;
        categoryList.value = [];
        categoryList.value.push({
          name: '待使用',
          id: 'useable',
          badge: {
            text: data.data.useableNum,
          },
        });
        categoryList.value.push({
          name: '已使用',
          id: 'used',
          badge: {
            text: data.data.usedNum,
          },
        });
        categoryList.value.push({
          name: '已过期',
          id: 'expired',
          badge: {
            text: data.data.expiredNum,
          },
        });
        // 默认待使用
        couponList.value = couponData.value.useable;
      }
    });
  };

  const handleClick = (item: any) => {
    current.value = item.index;
    if (item.id == 'useable') {
      couponList.value = couponData.value?.useable;
    } else if (item.id == 'used') {
      couponList.value = couponData.value?.used;
    } else if (item.id == 'expired') {
      couponList.value = couponData.value?.expired;
    } else {
      couponList.value = couponData.value?.useable;
    }
  };

  const discountName = (discount: number) => {
    return '￥' + Number(discount);
  };

  const quotaName = (discount: number, quota: number) => {
    return '满' + Number(quota) + '减' + Number(discount);
  };

  const limitTime = (startTime: string | undefined, endTime: string | undefined) => {
    let s = startTime,
      e = endTime;
    if (isDef(startTime) && isNotEmpty(startTime) && startTime.length > 10) {
      s = startTime.slice(0, 10);
    }
    if (isDef(endTime) && isNotEmpty(endTime) && endTime.length > 10) {
      e = endTime.slice(0, 10);
    }
    return s + ' - ' + e;
  };

  const showDetail = (index: number) => {
    currentIndex.value = index;
    showRule.value = !showRule.value;
  };

  const to_use = (id: number) => {
    console.log('去使用', id);
    Toast('去使用');
  };

  const to_coupon = () => {
    router.push(config.route.coupon);
  };

  const handlerChange = (e: any) => {
    selected.value = e.detail.value;
  };

  const to_delete = () => {
    console.log(selected.value);
    Toast('删除' + selected.value);
  };
</script>
<style lang="scss" scoped>
  page {
    padding: 0 20rpx;
  }

  .coupon {
    &__disable {
      background-color: #e1e1e1 !important;
    }

    &__content {
      margin-top: 20rpx;
      margin-bottom: 20rpx;

      &__item {
        height: 250rpx;
        display: flex;

        &__checkbox {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        &__left {
          background-color: rgb(240, 180, 219);
          min-width: 220rpx;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-flow: column;
          border-radius: 20rpx;

          &__discount {
            font-size: 52rpx;
            font-weight: 600;
            line-height: 1;
            color: #ff6a6c;
            padding-top: 30rpx;
          }

          &__quota {
            padding: 10rpx 0;
            font-size: 24rpx;
          }
        }

        &__right {
          background-color: #fff;
          flex: 1;
          height: 100%;
          padding: 10rpx;
          border-radius: 20rpx;

          &__title {
            padding: 10rpx 0;
            height: 40%;
          }

          &__time {
            padding-right: 10rpx;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 35%;

            button {
              width: 100%;
              color: #ff6a6c;
              font-size: 24rpx;
              background-color: #fff;
              line-height: 1;
              padding: 20rpx;
              border-radius: 20rpx;
              border: 1px solid #ff6a6c;
            }
          }

          &__tip {
            padding: 10rpx 0;
            font-size: 24rpx;
            height: 25%;

            &__btn {
              padding-top: 4rpx;
              padding-right: 10rpx;
              display: flex;
              justify-content: space-between;
              align-items: center;
            }
          }
          &__receive {
            position: absolute;
            transform: translate(200%, 50%);
            icon {
              font-size: 100rpx;
              line-height: 1;
              color: #ff6a6c;
            }
          }
        }

        &__rule {
          background-color: #fff;
          font-size: 24rpx;
          padding: 10rpx;
        }
      }
    }

    &__bottom {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;

      &__btn {
        color: #fff;
        font-size: 32rpx;
      }

      &__setting {
        right: 10px;
        position: absolute;
        border-left: 1px #fff dashed;
        padding: 20rpx;
        font-size: 24rpx;
        color: #fff;
      }
    }
  }

  .aster-line {
    margin: 0rpx;
    border-bottom-width: 2rpx;
    border-bottom-style: solid;
    width: 100%;
    border-color: #d6d7d9;
  }
</style>
